<style>
	.t-box {
		width: 100%;
		background: #1890FF;
		color: #FFF;
		padding-bottom: 20px;
		border-top: 1px solid #fff;
		margin-bottom: 20px;
	}

	.t-box-box {
		width: 90%;
		margin: 0 auto;
	}

	.t-box-box>view {
		margin-top: 20px;
	}
</style>
<template>
	<view>
		<view class="box">
			<view class="t-box">
				<view class="t-box-box">
					<view>
						<!-- share_receiving_data -->
						<!-- 路由：临沂 - 济南 - 北京 - 哈尔 -->
						路由：
						<!-- 						<text v-for="(time,index) in share_receiving_data.data.json_line"
							style="margin-left: 5px;">{{index!=0?' - '+time.outlet_name:time.outlet_name}} </text> -->
						<view style="color: white;font-weight: 600;">
							{{truck.addrfrom || '体验版暂不支持'}} - {{truck.addrto || '体验版暂不支持'}}
						</view>
					</view>

					<view>
						<text>
							<!-- 档口：{{share_receiving_data.data.muzzle_name || ''}} -->
							档口：{{truck.addrfromnode || '体验版暂不支持'}}
						</text>
						<!-- 					<view @click="toAddress()" style="float: right;display:flex;align-items:center;">
							<image src="/static/diqu.png" style=" width: 18px; height: 18px;margin-right: 5px;" mode="">
							</image>
							<text>去这里</text>
						</view> -->
					</view>

					<view>
						接货地址：顺和国际智慧物流园
					</view>
				</view>
			</view>

			<!-- 			<view class="nns">
				<view class="mm" v-if="type==2">
					<p>身份证：</p>
					<image @click="choosePhoto(3)" :src="list[3].img" mode=""></image>
				</view>
				<view class="mm">
					<p>驾驶证：</p>
					<image @click="choosePhoto(4)" :src="list[4].img" mode=""></image>
				</view>
				<view class="mm">
					<p>行驶证：</p>
					<image @click="choosePhoto(0)" :src="list[0].img" mode=""></image>
				</view>
				<view class="mm">
					<p>运营证：</p>
					<image @click="choosePhoto(2)" :src="list[2].img" mode=""></image>
				</view>
				<view class="mm">
					<p>上岗证：</p>
					<image @click="choosePhoto(1)" :src="list[1].img" mode=""></image>
				</view>
			</view> -->

			<p style="clear: both;" @click="showHiheCarNumber(true)">
				<view style="font-size: 18px;font-weight: 600;">车牌号：</view>
				<input v-model="car_plate" placeholder="请输入车牌号" disabled type="text">
			</p>

			<p style="clear: both;" v-if="type==2">
				<view style="font-size: 18px;font-weight: 600;">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
				<input v-model="name" placeholder="请输入姓名" type="text">
			</p>
			<p style="clear: both;">
				<view style="font-size: 18px;font-weight: 600;">手机号：</view>
				<input v-model="mobile" placeholder="请输入手机号" type="text">
			</p>

			<p>
				<view style="font-size: 18px;font-weight: 600;">预计到达时间：</view>
				<input v-model="estimate" style="width: 40%;" placeholder="时间" type="text" disabled>
				<span
					style="height: 50px;border-bottom: 1px solid #EEEEEE;display:flex;align-items:center; padding-right: 20px;font-size: 18px;font-weight: 600;color: #1890FF;">

					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
						style="float: left;margin-top: 5px;margin-left: 10px;">
						<image src="../../static/time.png" style="width: 20px; height: 20px;" mode=""></image>
					</picker>
				</span>
			</p>

			<button @click="save()">提交</button>

			<view class="tc" v-if="isShowCarNumber">
				<view class="tc-box">
					<p class="tc-box-p">填写车牌号</p>
					<p class="tc-box-p">
						<view class="number-input-box">
							<car-number-input @numberInputResult="numberInputResult"
								:defaultStr="car_plate"></car-number-input>
						</view>
					</p>
					<view class="car-btn-box">
						<view class="car-btn" @click="showHiheCarNumber(false)">取消</view>
						<view class="car-btn" @click="confirmCarNumber()">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	function getDate(type) {
		const date = new Date()
		let year = date.getFullYear()
		let month = date.getMonth() + 1
		let day = date.getDate()
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`
	}
	export default {
		data() {
			return {
				date: getDate({ format: true }),
				startDate: getDate('start'),
				endDate: getDate('end'),

				share_receiving_data: null,
				type: 1, //类型 1老板填写 2司机填写
				car_plate: "", //车牌号
				share_id: "", //分享的id
				estimate: "", //预计到达时间
				mobile: "", //手机号
				list: [{
						name: "行驶证",
						img: "../../static/add.png",
						imgs: ""
					},
					{
						name: "上岗证",
						img: "../../static/add.png",
						imgs: ""
					},
					{
						name: "运营证",
						img: "../../static/add.png",
						imgs: ""
					},
					{
						name: "身份证",
						img: "../../static/add.png",
						imgs: ""
					},
					{
						name: "驾驶证",
						img: "../../static/add.png",
						imgs: ""
					}
				],
				name: "", //驾驶员姓名
				bond: "", //保证金
				isShowCarNumber: false,
				defaultNum: '',
				userCarInfo: {},
				addImg: '../../static/add.png',

				truck: {}, // 传过来的车次信息
			}
		},
		onLoad(x) {
			console.log(x);
			this.type = x.type; // 老板 员工
			this.share_id = x.share_id; // 分享id
			// this.share_receiving() // 获取分享信息
			uni.setStorageSync('share_id', x.share_id)

			// 解析车次信息
			this.truck = JSON.parse(x.truck)

			// console.log('司机端填写信息页面收到的数据 = ', this.truck);
			// console.log('司机端填写信息页面收到的数据.transferid = ', this.truck.transferid);

		},
		methods: {

			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.estimate = this.date;
			},

			//司机接单页面---------------------------------------------
			share_receiving() {
				let data = {
					share_id: this.share_id,
					type: this.type
				}
				this.$rqt.share_receiving(data).then(res => {
					console.log(res);
					this.share_receiving_data = res;
					this.share_receiving_data.data.json_line = JSON.parse(this.share_receiving_data.data
						.json_line); //档口信息转为json
					this.bond = this.share_receiving_data.data.bond;
				})
			},

			choosePhoto111(x) {
				const _this = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					success(res) {
						console.log('选择图片完成', res)
						for (let i = 0; i < _this.list.length; i++) {
							if (x == _this.list[i].name) {
								_this.list[i].img = res.tempFilePaths[0]; //行驶证
							}
						}
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},
			choosePhoto(x) {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['original'],
					success(res) {
						console.log('选择图片完成', res)
						for (let i = 0; i < _this.list.length; i++) {
							if (x == i) {
								_this.list[i].img = res.tempFilePaths[0];
							}
						}
						_this.uploadImg(x);
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},
			// 上传图片
			uploadImg(i) {
				const _this = this;
				uni.showLoading({ title: "上传中" })
				this.$rqt.uploadPhoto(_this.list[i].img, (res) => {
					uni.hideLoading()
					let { data } = res
					let res_data = JSON.parse(data)
					let imgData = res_data.data
					let { fullurl } = imgData
					_this.list[i].img = fullurl
				}, (res) => {
					console.log(res);
				})
			},

			// 提交信息
			tj() {
				uni.showLoading({ title: "上传中" })
				// 上传图片
				const _this = this;
				for (let i = 0; i < _this.list.length; i++) {
					if (_this.list[i].img != "../../static/add.png") {
						console.log("上传图片：" + i)
						_this.$rqt.uploadPhoto(_this.list[i].img, (res) => {
							let kk = JSON.parse(res.data);
							console.log(kk.msg);
							if (kk.msg == "上传成功") {
								_this.list[i].imgs = kk.data.fullurl;
								console.log(kk.data.fullurl);
							}
						}, (res) => {
							console.log(res)
						})
					} else {
						if (_this.list[i].name != "身份证" && this.type != 2) {
							uni.showToast({
								title: "请添加" + _this.list[i].name,
								icon: 'none',
								duration: 850
							})
							return
						}
					}
				}
				//提交信息
				this.shangchuan()
			},
			//上传
			save() {
				const _this = this

				if (this.car_plate == "") {
					uni.showToast({
						title: "请填写车牌号",
						icon: 'none',
						duration: 850
					})
					return
				}
				if (this.name == "" && this.type == 2) {
					uni.showToast({ title: "请填写姓名", icon: 'none' })
					return
				}
				if (!this.mobile) {
					uni.showToast({ title: "请填写手机号", icon: 'none' })
					return
				}
				if (this.estimate == "") {
					uni.showToast({
						title: "请填写预计到达时间",
						icon: 'none',
						duration: 850
					})
					return
				}

				let data = {
					name: this.name, //驾驶员姓名
					mobile: this.mobile, //手机号
					car_plate: this.car_plate, //车牌号
					share_id: this.share_id, //分享的id
					type: this.type, //类型 1老板填写 2司机填写 
					estimate: this.estimate, //预计到达时间
					license_img: _this.list[0].img, //行驶证
					work_img: _this.list[1].img, //上岗证
					operate_img: _this.list[2].img, //经营证
					card_img: _this.list[3].img, //身份证
					drive_img: _this.list[4].img, //驾驶证
				}

				this.$rqt.confirm(data).then(res => {
					console.log(res)
					if (res.msg == "确认成功") {
						uni.hideLoading();
						uni.showToast({
							title: "提交成功",
							icon: 'success',
							duration: 850
						})
						setTimeout(() => {
							// type: 1, //类型 1老板填写 2司机填写
							// car_plate: "", //车牌号
							// 如果保证金为0
							if (this.bond <= 0) {
								uni.navigateTo({
									url: '/pages/index/zhifuchenggong?id=' + this.share_id +
										'&type=' + this.type
								});
							} else {
								uni.navigateTo({
									url: '/pages/index/zhufubaozhengjin?id=' + this.share_id +
										'&type=' + this.type + '&car_plate=' + this.car_plate +
										'&bond=' + this.bond
								});
							}
						}, 850);
					}
				})
			},
			// 导航去这里
			toAddress() {
				let outlet_info = this.share_receiving_data?.data?.outlet_info
				let address = outlet_info.province +
					outlet_info.city +
					outlet_info.area +
					outlet_info.address;
				console.log(address);
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					data: {
						key: 'e40691a34b3c803e06b5d9842839d2c8',
						address: address
					},
					success: (res) => {
						// console.log('高德res', res.data.geocodes[0])
						let jd = res.data.geocodes[0].location.split(',')[0]
						let wd = res.data.geocodes[0].location.split(',')[1]
						uni.openLocation({
							latitude: Number(wd),
							longitude: Number(jd),
							name: '地址',
							address: address,
							success: function(res1) {},
							fail: function(err) {
								console.log('err: ', err);
							}
						});
					}
				})
			},
			showHiheCarNumber(e) {
				this.isShowCarNumber = e;
			},
			numberInputResult(e) {
				// 去除空格
				e = e.replace(/\s*/g, "");
				this.car_plate = e;
			},
			confirmCarNumber() {
				this.showHiheCarNumber(false)
				this.getCarInfo();
			},
			getCarInfo() {
				let data = {
					car_plate: this.car_plate
				}
				this.$rqt.userCarInfo(data).then(res => {
					let { code, data } = res;
					if (data) {
						this.userCarInfo = data;
						this.name = data.name || '';
						this.mobile = data.mobile || '';
						this.list[0].img = data.license_img || '';
						this.list[1].img = data.work_img || '';
						this.list[2].img = data.operate_img || '';
						this.list[3].img = data.card_img || '';
						this.list[4].img = data.drive_img || '';
					} else {
						this.getBossCarInfo();
					}
				})
			},
			getBossCarInfo() {
				const share_id = uni.getStorageSync('share_id');
				console.log('share_id: ', share_id);
				let add_img = this.addImg;
				if (share_id > 0) {
					let data = {
						share_id: this.share_id,
						car_plate: this.car_plate,
						type: 3,
					}
					this.$rqt.getCarInfo(data).then(res => {
						let { code, data } = res;
						uni.removeStorageSync('share_id');
						if (data) {
							this.userCarInfo = data;
							this.name = data.name || '';
							this.mobile = data.mobile || '';
							this.list[0].img = data.license_img || add_img;
							this.list[1].img = data.work_img || add_img;
							this.list[2].img = data.operate_img || add_img;
							this.list[3].img = data.card_img || add_img;
							this.list[4].img = data.drive_img || add_img;
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	button {
		margin: 0 auto;
		width: 86%;
		height: 50px;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 50px;
		margin-bottom: 30px;
	}

	.nns {
		width: 90%;
		margin: 0 auto;
	}

	.mm {
		width: 50%;
		float: left;
		margin-top: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 50px;
	}

	.mm>p {
		font-size: 18px;
		font-weight: 600;
	}

	.mm>image {
		width: 80px;
		height: 80px;
		margin-top: 10px;
	}

	.box>p {
		display: flex;
		line-height: 50px;
		width: 90%;
		margin: 0 auto;
	}

	.box>p>input {
		width: 70%;
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
	}

	.box>h3 {
		text-align: center;
		margin-top: 25px;
	}

	.number-input-box {
		line-height: 60px;

		text-align: center;
		font-size: 18px;
		font-weight: 400;
		color: #686870;
	}

	.tc-box-p {
		font-size: 22px;
		font-weight: 500;
		color: #333539;
		text-align: center;
	}

	.tc-box>p>view {
		/* width: 80%;
		margin: 0 auto;
		margin-top: 30px;
		display: flex;
		justify-content: space-around; */
	}

	.tc-box>p>view>input {
		width: 28px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #CCCCCC;
	}

	.tc-box {
		padding-top: 10rpx;
		width: 343px;
		height: 230px;
		background: #FFFFFF;
		border-radius: 18px;
		margin: 0 auto;
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.tc {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 999;
	}

	.car-btn-box {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #EAEAF0;
		padding-top: 20rpx;
	}

	.car-btn {}
</style>